/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Modal,
} from 'react-native';
import Com from './src/Com';
import store from './src/modal/store';
import Web from './src/page/Web';
import LabMal from './src/page/LabMal';
import toInfo from './src/store/toInfo';

// 注册全局通信工具 
Component.prototype.$toInfo = toInfo;
Component.prototype.$on = toInfo.addEvent;
Component.prototype.$emit = toInfo.trigger;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      router: 'login',
      isShow: false,
    }
  }

  componentWillMount() {
    this.$on('labMalShow', () => {
      this.setState({
        isShow: true,
      });
    });
    this.$on('labMalHide', () => {
      this.setState({
        isShow: false,
      });
    });
    store.set('test', 'ahhahahah');
  }
  componentDidMount() {
    store.get('test').then((data) => {
      console.log(data);
    });
  }

  toggle(type) {
    this.setState({
      router: type,
    })
  }
  render() {
    let modal;
    if (this.state.isShow) {
      modal = <LabMal></LabMal>;
    } else {
      modal = null;
    }

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text>header</Text>
        </View>

        <View style={styles.box}>
          <View style={styles.left}>
            <Text onPress={() => { this.toggle('login') }} style={styles.tab}>Login</Text>
            <Text onPress={() => { this.toggle('home') }} style={styles.tab}>Home</Text>
            <Text onPress={() => { this.toggle('web') }} style={styles.tab}>Web</Text>
          </View>
          <View style={styles.cnt}>
            <View style={styles.com}>
              {/* 这里嵌套webview也不显示？？？电脑性能问题还是rn bug */}
              <Com router={this.state.router} />
            </View>
            {/* 遮罩层 */}
            {modal}
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: '100%',
    backgroundColor: '#F5FCFF',
  },
  header: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '10%',
    backgroundColor: '#eee',
  },
  box: {
    display: 'flex',
    height: '90%',
    flexDirection: 'row',
  },
  left: {
    width: '20%',
    backgroundColor: '#eee',
  },
  tab: {
    width: '100%',
    height: 30,
    color: '#fff',
    lineHeight: 30,
    textAlign: 'center',
    marginBottom: 20,
    backgroundColor: '#555',
  },
  cnt: {
    position: 'relative',
    width: '80%',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#555',
    backgroundColor: 'pink',
  },
  com: {
    position: 'relative',
    padding: 10,
    // backgroundColor: '#000',
    height: '100%',
  }
});
